import React, { Component } from 'react'

import {connect} from 'react-redux'
import {DEL_TODO, UPDATE_TODO} from '../store/types'
class Content extends Component {
  render() {
    return (
      <ul className='cell'>
        { this.props.todoList.map(item => {
            return <li key={item.id}>
              <input checked={item.isSelect} onChange={(e)=>{
                const obj = {
                  ...item,
                  isSelect: e.target.checked
                }
                // console.log(obj);
                this.props.updateItem(obj)
              }} type="checkbox" />
              <h5>{item.title}</h5>
              <button onClick={()=>{
                // 执行删除的方法
                this.props.delItem(item)
              }}>删除</button>
            </li>
        }) }
      </ul>
    )
  }
}


export default connect((state)=>{
    // 将全局状态映射到 props 
    return {
        todoList: state.todo.todoList
    }
},(dispatch)=>{
    // 将全局状态的修改方法映射到 prips
    return {
      delItem(obj){
        // 触发删除事件，且将 要删除的对象传递过去
        dispatch({type: DEL_TODO, payload: obj})
      },
      updateItem(obj){
        dispatch({type: UPDATE_TODO, payload: obj})
      }
    }
})(Content)